<template>
  <div class="my-new-finance">
    <v-dialog title="新建应收" :show.sync="dialogVisible" width="1200px" @beforeClose="beforeClose" :close-on-click-modal="false">
      <div class="card-box">
        <div class="card-title">基本信息</div>
        <el-form ref="editForm" :model="financeForm" class="form-wrap" size="small" :rules="rules" label-position="top">
          <el-form-item label="关联合同" prop="propertyNames">
            <el-input readonly v-model="financeForm.propertyNames"></el-input>
          </el-form-item>
          <el-form-item label="收款项目" prop="chargeProjectName">
            <el-select v-model="financeForm.chargeProjectName" @change="selectOne" placeholder="请选择">
              <el-option v-for="item in chargeProjectType" :key="item.label" :label="item.label" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出租方" prop="customerName">
            <el-input readonly v-model="financeForm.customerName"></el-input>
          </el-form-item>
          <el-form-item label="合同应收金额" prop="receivableMoney">
            <el-input v-model="financeForm.receivableMoney"></el-input>
          </el-form-item>
          <el-form-item label="费用周期" prop="costPeriodArr">
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model.trim="financeForm.costPeriodArr"
              format="yyyy-MM-dd"
              valueFormat="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="应收日期" prop="receivableDate">
            <el-date-picker v-model="financeForm.receivableDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="应收日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" class="full" prop="remarks">
            <el-input v-model="financeForm.remarks" maxlength="200" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="card-title">上传文件</div>
        <div class="handling-opinions">
          <v-upload
            ref="collectionUpload"
            :busId="financeForm.receivableId"
            modelType="finance"
            @onSuccess="onSuccess"
            isShowFileList
            :isView="false"
            multiple
            v-model="fileList"
          />
        </div>
        <div class="card-title">
					<div>
						<span class="required">*</span>办理意见
					</div>
				</div>
        <div class="handling-opinions">
          <el-input type="textarea" v-model="opinion" maxlength="100" placeholder="请输入" class="full"></el-input>
        </div>
      </div>
      <span slot="foot">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button v-throttle="[commit]">保 存</el-button>
        <el-button v-throttle="[commitReview]">保存并提交复核</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import { getDict } from '~/utils'
import { doubleValidate } from '~/utils/validate.js'
import { addCollection } from '../../api/collection'
export default {
  name: "edit-data",
  created () {
    this.chargeProjectType = getDict('charge_project_type')
  },
  data () {
    return {
      dialogVisible: false,
      financeForm: {
        rentContractId: '',
        receivableId: '',
        propertyNames: '',
        chargeProjectId: '',
        chargeProjectName: '',
        customerName: '',
        receivableMoney: '',
        costPeriodArr: '',
        costPeriodStart: '',
        costPeriodEnd: '',
        receivableDate: '',
        remarks: '',
        opinion: '',
        receivableStatus: '',
        projectName: '',
        customerId: ''
      },
      opinion: '',
      chargeProjectType: [],
      fileList: [],
      rules: {
        chargeProjectName: [{ required: true, message: '请选择收费项目', trigger: 'blur' }],
        propertyNames: [{ required: true, message: '请选择关联合同', trigger: 'blur' }],
        receivableMoney: [{ required: true, message: '请输入本次应收金额', trigger: 'blur' },
        { validator: doubleValidate, trigger: "change" },],
        costPeriodArr: [{ required: true, message: '请输入费用周期', trigger: 'blur' }],
        receivableDate: [{ required: true, message: '请输入应收日期', trigger: 'blur' }],
        billNumber: [
          { max: 50, message: '票据编号不得超过50个字符', trigger: 'blur' }],
        remarks: [{ max: 500, message: '备注不得超过500个字符', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //打开弹框
    show (item) {
      this.dialogVisible = true
      this.financeForm.propertyNames = item.propertyNames
      this.financeForm.projectName = item.propertyNames
      this.financeForm.customerName = item.customerName
      this.financeForm.customerId = item.customerId
      this.financeForm.rentContractId = item.rentContractId
    },
    //关闭弹框
    beforeClose (done) {
      this.$emit('beforeClose')
    },
    //选择收款项目
    selectOne (item) {
      this.financeForm.chargeProjectId = item.value
      this.financeForm.chargeProjectName = item.label
    },
    //取消
    handleCancel () {
      this.$emit('handleClose')
      this.dialogVisible = false
    },
    //保存
    commit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.financeForm.costPeriodStart = this.financeForm.costPeriodArr[0]
          this.financeForm.costPeriodEnd = this.financeForm.costPeriodArr[1]
          this.financeForm.receivableStatus = '10'
					if (this.opinion === '' || this.opinion === null || this.opinion === undefined) {
						this.$message.error('办理意见不能为空！')
					} else {
						this.$refs.collectionUpload.submit('finance', this.financeForm.receivableId);
					}
        }
      })
    },
    //保存并提交复核
    commitReview () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.financeForm.costPeriodStart = this.financeForm.costPeriodArr[0]
          this.financeForm.costPeriodEnd = this.financeForm.costPeriodArr[1]
          this.financeForm.receivableStatus = '11'
					if (this.opinion === '' || this.opinion === null || this.opinion === undefined) {
						this.$message.error('办理意见不能为空！')
					} else {
						this.$refs.collectionUpload.submit('finance', this.financeForm.receivableId);
					}
        }
      })
    },
    //文件上传
    async onSuccess (response, file, fileList) {
      this.financeForm.receivableId = response.data
      this.financeForm.opinion = this.opinion
      const res = await addCollection(this.financeForm)
      if (res.data.code == 0) {
        this.$message.success(`提交成功!`);
        this.dialogVisible = false;
        this.$emit('resetList')
      } else {
        this.$message.error(res.data.msg)
      }
    },
  }

}
</script>

<style scoped lang='scss'>
@include formWrap(3);
.handling-opinions {
  padding: 20px;
  .el-textarea__inner {
    border: 0.5px solid #ccc;
  }
}
.card-title {
	.required {
		color: #f67979;
		margin-right: 8px;
	}
}
</style>
